<script>
export default {
  props: ["modelValue", "isAdd"],
  emits: ["update:modelValue", "user-save"],
  computed: {
    user: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit("update:modelValue", value);
      }
    }
  }
};
</script>

<template>
  <div class="user-form">
    <div>
      <label for="username">用户名</label>
      <input type="text" id="username" v-model="user.username" :disabled="!isAdd" />
    </div>
    <div>
      <label for="nickname">昵称</label>
      <input type="text" id="nickname" v-model="user.nickname" />
    </div>
    <div>
      <label for="truename">姓名</label>
      <input type="text" id="truename" v-model="user.truename" />
    </div>
    <div>
      <label for="avatar">头像</label>
      <input type="text" id="avatar" v-model="user.avatar" />
    </div>
    <div>
      <label for="role">角色</label>
      <select id="role" v-model="user.role">
        <option disabled value="">选择角色</option>
        <option :value="1">管理员</option>
        <option :value="2">普通用户</option>
      </select>
    </div>
    <div>
      <button @click="$emit('user-save')">提交</button>
    </div>
  </div>
</template>

<style scoped>
.user-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.user-form > div {
  flex: 1 1 auto;
  margin: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

label {
  display: inline-block;
  width: 80px;
}

textarea,
input {
  flex: auto;
}

button {
  margin-left: 80px;
}
</style>
